<template>
  <div id="attachmentCate">
    <el-scrollbar>
      <!-- <el-button class="allCate" @click="append">添加分类</el-button> -->
      <el-tree ref="tree" class="filter-tree" :data="treeData" :props="defaultProps" highlight-current
        :expand-on-click-node="showTree" :indent="12" node-key="id" :current-node-key="currentNode"
        :default-expanded-keys="defaultExpandKeys" @node-click="handleNodeClick" icon-class="el-icon-arrow-right">
        <template slot-scope="{ node, data }">
          <div class="flex-row treeSortList">
            <span class="tooltip-wrap">{{ node.label }}</span>
            <div v-if="showBtn[data.id]" class="doBtn">
              <el-button v-if="showAdd" type="text" size="mini" icon="el-icon-plus" @click.stop="() => append(data)" />
              <el-button v-if="showEdit" type="text" size="mini" icon="el-icon-edit"
                @click.stop="() => edit(data, node)" />
              <el-button v-if="showDele" type="text" size="mini" icon="el-icon-delete"
                @click.stop="() => remove(data, node)" />
            </div>
          </div>
        </template>
      </el-tree>
    </el-scrollbar>

    <BaseDialog :title="cate_id == '' ? $t('增加分类') : $t('编辑分类')" :dialog-show.sync="dialogShow" width="50%" :append="true"
      class="dialog_cate">
      <div style="padding: 0px 20px">
        <el-form ref="form" :model="form" :rules="formRules" label-position="top">
          <el-form-item :label="$t('上级分类')" prop="parent_id">
            <el-select v-model="form.parent_id">
              <!-- <el-option label="一级分类" :value="0" /> -->
              <el-option v-for="item in cateList" :key="item.id" :label="item.title" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('分类名称')" prop="title">
            <el-input v-model="form.title" />
          </el-form-item>
        </el-form>
        <div style="text-align: center" class="dialog-footer">
          <el-button type="primary" @click="submit">
            {{ $t('提交') }}
          </el-button>
        </div>
      </div>
    </BaseDialog>
  </div>
</template>

<script>
import attachmentApi from '@/api/system/attachment'
export default {
  data() {
    return {
      currentNode: 0,
      defaultExpandKeys: [],
      dialogShow: false,
      form: {
        parent_id: '',
        path: '',
        title: ''
      },
      formRules: {
        parent_id: [
          {
            required: true,
            message: this.$t('请选择上级分类'),
            trigger: 'change'
          }
        ],
        title: [
          {
            required: true,
            message: this.$t('请输入分类名称'),
            trigger: 'blur'
          }
        ]
      },
      cate_id: '',
      cateList: [],
      treeData: [],
      // data: JSON.parse(JSON.stringify(data)),
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      showTree: false, // 是否点击节点展开树，false 只能点前面三角图标展开
      showAdd: true,
      showBtn: [],
      showEdit: false,
      showDele: false
    }
  },
  watch: {
    treeData(val, value) {
      // console.log(val, value, '11111111111111111')
    }
  },
  created() {
    this.getCateList(0)
  },
  methods: {
    // 附件类别
    getCateList(val) {
      var that = this
      attachmentApi.cateList({ title: val == 0 ? '' : val }).then(res => {
        if (res.code == 0) {
          // 重新打开时 初始化到全部分类下
          if (val == 0) {
            this.currentNode = 0
            this.showBtn = []
            this.$set(this.showBtn, val, true)
            this.showEdit = false
            this.showDele = false
            this.cate_id = val
            // this.handleNodeClick()
          }
          that.treeData = res.data
          this.cateList = JSON.parse(JSON.stringify(res.data))
          this.cateList[0].title = this.$t('一级分类')
          this.defaultExpandKeys = [this.currentNode]
          this.$nextTick(() => {
            this.$refs.tree.setCurrentKey(this.currentNode)
          })
        }
      })
    },
    // 点击分类
    handleNodeClick(data) {
      this.currentNode = data.id
      this.cate_id = data.id

      // 调用父组件的方法请求附件列表
      this.$emit('update', data.id)
      // 判断是否显示新增用户按钮
      if (data.parent_id != 0) {
        this.showAdd = false
      } else {
        this.showAdd = true
      }
      // 展示增删改icon
      if (data.id == 0) {
        this.showEdit = false
        this.showDele = false
      } else {
        this.showEdit = true
        this.showDele = true
      }
      this.showBtn = []
      this.$set(this.showBtn, data.id, true)
    },
    // 新增分类
    append(data) {
      this.dialogShow = true
      this.cate_id = ''
      this.form.parent_id = data.id
      this.form.title = ''
    },
    // 编辑分类
    edit(data) {
      // console.log(data, '------------------')
      this.dialogShow = true
      this.form.parent_id = data.parent_id
      this.form.title = data.title
      this.form.path = data.path
      this.cate_id = data.id
    },
    // 删除分类
    remove(data) {
      // console.log(data)
      // return
      this.$confirm(this.$t('删除该分类'), this.$t('提示'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: 'warning'
      })
        .then(() => {
          attachmentApi.cateDelete({ id: data.id }).then(res => {
            if (res.code == 0) {
              this.$message.success(res.msg)
              this.getCateList()
            }
          })
        })
        .catch(() => { })
    },
    // 提交编辑、新增分类
    submit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (!this.cate_id) {
            attachmentApi.cateSave({ ...this.form }).then(res => {
              if (res.code == 0) {
                this.dialogShow = false
                this.$message.success(res.msg)
                this.getCateList()
              }
            })
          } else {
            const val = this.form
            val.id = this.cate_id
            attachmentApi.cateUpdate(val).then(res => {
              if (res.code == 0) {
                this.dialogShow = false
                this.$message.success(res.msg)
                this.getCateList()
              }
            })
          }
        } else {
          this.$message.error(this.$t('请填写必要信息'))
        }
      })
    }
  }
}
</script>
<style lang="scss">
.dialog_cate {
  .el-select {
    width: 100%;
  }

  .el-button--primary {
    background-color: var(--huocms-com-color-primary);
    border-color: var(--huocms-com-color-primary);
    border-radius: 30px;
  }

  .el-button--primary:hover,
  .el-button--primary:focus {
    background-color: var(--huocms-com-color-primary);
    border-color: var(--huocms-com-color-primary);
  }
}

#attachmentCate {
  height: 400px;

  .allCate {
    height: 30px;
  }

  .el-scrollbar {
    height: 100%;
  }

  .el-scrollbar__thumb {
    width: 0;
  }

  .el-scrollbar__wrap {
    overflow-x: hidden;
  }

  // 添加部门时设置菜单
  .el-tree.form-tree {
    padding: 10px 20px;
  }

  .el-button+.el-button {
    margin-left: 10px;
  }

  .el-tree {
    padding: 20px 0;
    font-size: 14px;
  }

  .treelistCont {
    width: 500px;
  }

  /* 高亮显示选中 */
  .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
    color: var(--huocms-com-color-primary);
    background-color: #eff5ff;
    border-radius: 6px;

    .el-tree-node__expand-icon {
      color: var(--huocms-com-color-primary);
    }

    .el-tree-node__expand-icon.is-leaf {
      color: transparent;
    }
  }

  .el-tree-node__content {
    height: 40px;
    line-height: 20px;
  }

  .el-tree-node__content .el-input {
    width: auto;
    min-width: 60px;
  }

  .treeSortList {
    width: calc(100% - 28px);
    align-items: center;
    justify-content: space-between;
    position: relative;
    display: flex;

    .tooltip-wrap {
      width: calc(100% - 70px);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .treeSortList .doBtn {
    width: 62px;
    z-index: 999;
    text-align: right;
    margin-right: 8px;

    .el-button--mini {
      padding: 0;
    }
  }

  .treeSortList .doBtn .el-button--text {
    color: var(--huocms-com-color-primary);
  }

  .treeSortList .doBtn .el-button--text i.el-icon-plus {
    color: var(--huocms-com-color-primary);
  }

  .treeSortList .doBtn .el-button--text i.el-icon-edit-outline {
    color: var(--huocms-com-color-primary);
  }

  .treeSortList .doBtn .el-button--text i.el-icon-setting {
    color: var(--huocms-com-color-primary);
  }
}
</style>
<style scoped></style>
